<template>
	<view class="order-list" :class="themeName">
		<u-tabs font-size="28" name="tabsName" inactive-color="#333" :active-color="themeColor" :list="list"
			:is-scroll="false" :current="current" @change="change">
		</u-tabs>

		<view class="order-item">
			<view class="order-item-box">
				<mescroll-uni ref="mescrollRef" bgColor="white" @init="mescrollInit" :down="downOption" :up="upOption"
					@down="downCallback" @up="upCallback" :fixed="false" :bottom="0">

					<view class="bg-white p-24 m-b-16" v-for="(item, index) in lists" :key="index"
						@click="goPage('/bundle/pages/after_sale_detail/after_sale_detail',item.master_id)">
						<!-- item头部 -->
						<view class="header nr p-b-24 flex row-between">
							<text>{{$zhTran('申请时间')}}：{{item.create_time}}</text>
							<text>{{item.refund_method_desc}}</text>
						</view>

						<!-- 商品信息 -->
						<view class="m-t-20 bg-white flex" v-for="val,idx in item.goods_snap" :key="idx">
							<u-image :src="val.goods_snap.image" width="180rpx" height="180rpx"
								mode="aspectFill"></u-image>
							<view class="m-l-24" style="width: 100%;">
								<view class="nr line-2 m-b-20">
									{{val.goods_snap.goods_name}}
								</view>
								<view class="xs muted">
									{{ val.goods_snap.spec_value_str }}
								</view>
								<view class="xs muted flex row-between">
									<price class="m-r-12" :content="val.goods_price" color="#101010" mainSize="28rpx"
										minorSize="26rpx" :prefix="price_symbol"></price>

									<text>x {{val.goods_num+val.goods_snap.unit_desc}}</text>
								</view>
							</view>
						</view>

						<view class="apply-ststus lighter nr m-t-20">
							{{item.sub_status_desc}}
						</view>

						<view class="footer bg-white p-t-20">
							<view class="flex row-right ">
								<view class="br60 btn inline m-l-24" @click.stop="openCancel(index)"
									v-if="item.btns.cancel_btn">
									{{$zhTran('撤销申请')}}
								</view>

								<view class="br60 btn inline m-l-24"
									@click.stop="goPage('/bundle/pages/input_express_info/input_express_info',item.master_id)"
									v-if="item.btns.express_btn">
									{{$zhTran('填写快递单号')}}
								</view>

								<view class="br60 btn inline m-l-24"
									@click="goPage('/bundle/pages/post_after_sale/post_after_sale',item.order_id)"
									v-if="item.btns.reapply_btn">
									{{$zhTran('重新申请')}}
								</view>
							</view>
						</view>
					</view>

				</mescroll-uni>
			</view>
			<w-jishuzhichi class="jishuzhichi-nodata" />
		</view>

		<u-modal v-model="showCancel" width="540" :confirm-style="{'border-left':'1rpx solid #e5e5e5'}"
			@confirm="cancelApplyFun" :showCancelButton="true" :show-title="false" @cancel="showCancel=false"
			:confirm-text="$zhTran('确定')" cancel-color="#999999" confirm-color="#101010" border-radius="10">
			<view class="flex row-center m-t-24" style="color: #101010;font-size: 30rpx;">
				{{$zhTran('提示')}}
			</view>
			<view style="margin:40rpx 30rpx;" class="md muted">{{$zhTran('是否要撤销申请？？')}}</view>
		</u-modal>

	</view>
</template>

<script>
	import {
		apiAfterSaleList,
		apiAfterSaleCancel
	} from "@/api/order.js";
	import Cache from '@/utils/cache'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item.js";
	export default {
		mixins: [MescrollMixin, MescrollMoreItemMixin],
		data() {
			return {
				showCancel: false, //撤销申请的弹窗
				master_id: '', //撤销申请的ID

				list: [{
					tabsName: this.$zhTran('售后中'),
					isShow: true,
					type: 'status_ing'
				}, {
					tabsName: this.$zhTran('售后完成'),
					isShow: false,
					type: 'status_success'
				}, {
					tabsName: this.$zhTran('售后失败'),
					isShow: false,
					type: 'status_fail'
				}],
				current: 0,
				lists: [],

				downOption: {
					auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption: {
					auto: true, // 不自动加载
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						icon: this.$getImageUri('resource/image/shopapi/uniapp/empty/order.png'),
						tip: this.$zhTran('暂无售后数据'), // 提示
						fixed: true,
						top: "200rpx",
					}
				},
				price_symbol: '￥'
			};
		},

		methods: {
			change(index) {
				for (let i = 0; i < this.list.length; i++) {
					this.list[i].isShow = false
				}
				this.current = index;
				this.upCallback({
					num: 1,
					size: 10
				});
				this.list[index].isShow = true
			},

			upCallback(page) {
				let num = page.num;
				let size = page.size

				apiAfterSaleList({
					type: this.list[this.current].type,
					clsp_id: Cache.get('clsp_id'),
					page_no: num,
					page_size: size
				}).then(res => {
					if (page.num == 1) this.lists = []; //如果是第一页需手动置空列表
					this.lists = this.lists.concat(res.lists); //追加新数据
					this.lists = this.$zhTran(this.lists)
					this.mescroll.endSuccess(res.lists.length, res.count);
					this.price_symbol = res.price_symbol
				}).catch(err => {
					this.mescroll.endErr()
				})

			},

			openCancel(index) {
				this.showCancel = true;
				this.master_id = this.lists[index].master_id
			},

			// 撤销审核
			cancelApplyFun() {
				apiAfterSaleCancel({
					id: this.master_id
				}).then(res => {
					this.upCallback({
						num: 1,
						size: 10
					});
					this.$toast({
						title: this.$zhTran('取消成功')
					})
				})
			},

			// 去填写快递单号
			goPage(url, id) {
				this.$Router.push({
					path: url,
					query: {
						id: id
					}
				})
			}
		},

		onShow() {
			this.upCallback({
				num: 1,
				size: 10
			});
		},
		onLoad() {
			if (this.$Route.meta.atitle) {
				uni.setNavigationBarTitle({
					title: this.$zhTran(this.$Route.meta.atitle)
				})
			}
		}
	};
</script>
<style lang="scss">
	page {
		height: 100%;
		padding: 0;
	}

	.order-list {
		height: 100%;
		display: flex;
		flex-direction: column;

		.order-item {
			flex: 1;
			min-height: 0;

			.order-item-box {
				height: calc(100% - 90rpx - constant(safe-area-inset-bottom));
				height: calc(100% - 90rpx - env(safe-area-inset-bottom));
			}
		}
	}

	.apply-ststus {
		border-radius: 6px;
		background: #f6f6f6;
		padding: 20rpx 40rpx;
	}

	.btn {
		padding: 10rpx 40rpx;
		border-width: 1rpx;
		border-style: solid;
		@include font_color();
		@include border_color();
	}
</style>